<template>
  <div>
    <el-table class="orderTable" :data="orderData.list" max-height="700px" stripe>
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-table
            v-if="scope.row.orderItemVoList.length !== 0"
            :data="scope.row.orderItemVoList"
            show-summary
          >
            <el-table-column width="100px">
              <template slot-scope="innerscope">
                <img
                  src="@/assets/logo.png"
                  v-real-img="realImg(scope.row.imgHost, innerscope.row.productImage)"
                  width="100%"
                />
              </template>
            </el-table-column>
            <el-table-column prop="productName" label="商品名称"></el-table-column>
            <el-table-column prop="currentUnitPrice" label="当前单价"></el-table-column>
            <el-table-column prop="quantity" label="数量"></el-table-column>
            <el-table-column prop="totalPrice" label="总价"></el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column width="200px" label="创建日期">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left:10px">{{scope.row.createTime}}</span>
        </template>
      </el-table-column>
      <el-table-column width="140px" prop="orderNo" label="订单号"></el-table-column>
      <el-table-column width="80px" label="收货人">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <div v-if="scope.row.shippingVo !== null">
              <p>姓名：{{scope.row.shippingVo.receiverName}}</p>
              <p>住址：{{scope.row.shippingVo.receiverProvince}}{{scope.row.shippingVo.receiverCity}}{{scope.row.shippingVo.receiverDistrict}}{{scope.row.shippingVo.receiverAddress}}</p>
            </div>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.receiverName }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column width="80px" prop="payment" label="订单总价"></el-table-column>
      <el-table-column min-width="80px" prop="paymentTypeDesc" label="支付方式"></el-table-column>
      <el-table-column min-width="80px" label="支付状态">
        <template slot-scope="scope">
          <span v-if="scope.row.status === 10">
            <el-popover placement="top" trigger="hover">
              <el-button type="primary" size="mini" @click="pay(scope.row)">支付</el-button>
              <el-button type="danger" size="mini" @click="cancelOrder(scope.row)">取消订单</el-button>
              <el-button type="text" slot="reference">{{scope.row.statusDesc}}</el-button>
            </el-popover>
          </span>
          <span v-else-if="scope.row.status === 40">
            <el-popover placement="top" trigger="hover">
              <el-button type="success" size="mini" @click="confirmReceipt(scope.row)">确认收货</el-button>
              <el-button type="text" slot="reference">{{scope.row.statusDesc}}</el-button>
            </el-popover>
          </span>
          <span v-else>{{scope.row.statusDesc}}</span>
        </template>
      </el-table-column>
      <el-table-column width="200px" label="支付时间">
        <template slot-scope="scope">
          <i class="el-icon-time" v-if="scope.row.paymentTime != ''"></i>
          <span style="margin-left:10px">{{scope.row.paymentTime}}</span>
        </template>
      </el-table-column>
      <el-table-column width="200px" label="发货时间">
        <template slot-scope="scope">
          <i class="el-icon-time" v-if="scope.row.sendTime != ''"></i>
          <span style="margin-left:10px">{{scope.row.sendTime}}</span>
        </template>
      </el-table-column>
      <el-table-column width="200px" label="交易完成时间">
        <template slot-scope="scope">
          <i class="el-icon-time" v-if="scope.row.endTime != ''"></i>
          <span style="margin-left:10px">{{scope.row.endTime}}</span>
        </template>
      </el-table-column>
      <el-table-column width="200px" label="交易取消时间">
        <template slot-scope="scope">
          <i class="el-icon-time" v-if="scope.row.closeTime != ''"></i>
          <span style="margin-left:10px">{{scope.row.closeTime}}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="使用沙箱支付宝扫码支付"
      :visible.sync="payDialogVisible"
      width="50%"
      center
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div style="text-align:center">
        <p>订单号：{{payOrderNo}}</p>
        <img src="@/assets/logo.png" v-real-img="realImg2(qrURL)" width="50%" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="info" @click="paycheck('close')">下次一定</el-button>
        <el-button type="success" @click="paycheck('check')">确认支付</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryInfo: {
        orderID: null,
        pageNum: 1,
        pageSize: 10
      },
      orderData: {},
      payDialogVisible: false,
      payOrderNo: '',
      qrURL: '',
      payRow: {}
    }
  },
  created() {
    this.getOrderList()
  },
  methods: {
    async getOrderList() {
      const { data: res } = await this.$axios.get('manage/order/get_order_list_byID', this.queryInfo)
      if (res.status !== 0) return this.$message.error(res.msg)
      console.log(res)
      this.orderData = res.data
    },
    realImg(host, img) {
      if (img === null || img === '') {
        return 'false'
      }
      return host + img
    },
    realImg2(imgURL) {
      if (imgURL === null || imgURL === '') {
        return 'false'
      }
      return imgURL
    },
    // 确认收货
    async confirmReceipt(row) {
      console.log('确认收货:' + row.orderNo)
      const { data: res } = await this.$axios.put('manage/order/confirm_receipt/' + row.orderNo)
      console.log(res)
      if (res.status !== 0) return this.$message.error(res.msg)
      this.$message.success(res.msg)
      row.status = res.data.status
      row.statusDesc = res.data.statusDesc
      row.endTime = res.data.endTime
    },
    // 取消订单
    async cancelOrder(row) {
      console.log('取消订单：' + row.orderNo)
      const { data: res } = await this.$axios.delete('manage/order/cancel_order/' + row.orderNo)
      console.log(res)
      if (res.status !== 0) return this.$message.error(res.msg)
      this.$message.success(res.msg)
      // console.log(row)
      row.status = res.data.status
      row.closeTime = res.data.closeTime
      row.statusDesc = res.data.statusDesc
    },
    // 支付
    async pay(row) {
      console.log('支付：' + row.orderNo)
      // 提交订单号请求支付二维码
      // 打开弹框，供用户扫码支付
      this.payOrderNo = row.orderNo
      console.log('获取支付二维码')
      const info = new FormData()
      info.append('orderNo', this.payOrderNo)
      const { data: res } = await this.$axios.post('manage/order/pay', info)
      console.log(res)
      if (res.status !== 0) return this.$message.error(res.msg)
      this.qrURL = res.data.qrUrl
      this.payDialogVisible = true
      this.payRow = row
    },
    //
    async paycheck(val) {
      if (val === 'close') {
        this.payDialogVisible = false
        return
      } else if (val === 'check') {
        console.log('检查是否已支付')
        const info = new FormData()
        info.append('orderNo', this.payOrderNo)
        const { data: res } = await this.$axios.post('manage/order/query_order_pay_status', info)
        console.log(res)
        if (res.status !== 0) return this.$message.error(res.msg)
        this.payRow.status = res.data.status
        this.payRow.paymentTime = res.data.paymentTime
        this.payRow.statusDesc = res.data.statusDesc
        this.$message.success(res.msg)
        this.payOrderNo = ''
        this.qrURL = ''
        this.payRow = {}
        this.payDialogVisible = false
        return
      }
      return this.$message.error('发生未知错误！')
    }
  }
}
</script>

<style lang="less" scoped>
.orderTable {
  margin-top: 50px;
}
</style>
